<template>
  <div>
    <HomeHeader />
    <!-- 最外层有一个 van-tabs 是一个大容器, 所有分类标签都在里面 -->
    <!-- 其中有一个 v-model 双向绑定当前激活项的索引 -->
    <!-- 当前是第几个标签页被选中, 这个属性就是这个标签的索引 -->
    <van-tabs v-model="activeCateIndex" sticky>
      <!-- 每个 van-tab 都是一个单独的标签页 -->
      <!-- 包括标签按钮, 和内容页面两个部分
      按钮的文字由 title 决定, 内容放在开闭标签中-->

      <van-tab :title="category.name" v-for="category in cateList" :key="category.id">
        <van-list
          @load="loadMorePost"
          :immediate-check="false"
          v-model="category.loading"
          :finished="category.finished"
          finished-text="我是有底线的"
        >
          <!-- 这里是分类的标签页, category 变量就是当前激活的分类数据
          之前我们已经用 category.name 来渲染标签按钮-->
          <!-- 现在每一个分类还有一个文章列表, 就可以用来渲染文章 category.postList -->
          <PostItem v-for="post in category.postList" :key="post.id" :postData="post" />
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import HomeHeader from "@/components/HomeHeader";
import PostItem from "@/components/PostItem";
export default {
  data() {
    return {
      activeCateIndex: 0,
      cateList: [],
    };
  },
  components: {
    HomeHeader,
    PostItem,
  },

  watch: {
    activeCateIndex() {
      // 现在最后一个栏目不是获取文章
      // 而是跳转页面
      // 如果点击的这个索引 == 数组长度减一 就是最后一个分类
      // 跳转即可
      if (this.activeCateIndex == this.cateList.length - 1) {
        this.$router.push("/manage");
        return;
      }
      // 只有当前激活分类本身 postList 为空, 才发起请求
      // 如果本身已经有文章, 无需再发送
      if (this.cateList[this.activeCateIndex].postList.length == 0) {
        this.loadPost();
      }
    },
  },
  created() {
    // 现在我们有了栏目管理页面
    // 有可能在本地储存当中有激活栏目数据
    // 如果有, 那么就不应该从远程获取栏目
    if (localStorage.getItem("activeList")) {
      // 本地储存的激活列表就是我的分类数据来源
      const category = JSON.parse(localStorage.getItem("activeList"));
      // 现在的这个从本地储存拿出来的数据, 就是分类数据来源 替代原来的 res.data.data 即可
      // 后续的所有操作都是一模一样
      const newCate = category.map((category) => {
        // 针对每个分类, 都返回一个拥有原来全部属性, 并多了一个 postList 的对象
        // 组成一个新数组
        return {
          ...category,
          postList: [],
          pageIndex: 1,
          pageSize: 6,
          loading: false,
          finished: false,
        };
      });
      // 将处理分类的逻辑抽离出来
      // 在里面添加一个只有 name 的分类
      newCate.push({
        name: "∨",
      });
      // 我希望拿到的分类数据, 原来有的数据我都要, 同时在这基础上各自添加一个数组管理文章
      this.cateList = newCate;

      // 获取完分类栏目数据, 才能第一次获取文章列表
      // 不然没法得到当前激活栏目的 id
      this.loadPost();

      console.log(this.cateList);
    } else {
      // 页面进入后, 自动获取栏目数据
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res.data.data);
        // 数据获取完毕, 放到 data 中进行渲染
        // this.cateList = res.data.data

        // 不可以先赋值
        // this.cateList = res.data.data
        // // 再改造数据
        // this.cateList.forEach(category=>{
        //   category.postList = []
        // })
        // 我们知道 vue data 是有响应式渲染的功能, 也就是被随时监听
        // 其实神奇的事情就发生在 赋值这一刻,赋值的时候拥有的属性, 会被监听,
        // 之后再添加的数据, 在数据层面没问题, log 出来正确
        // 但是对于 vue 检测不到变化, 不会自动渲染页面
        // 一般的操作逻辑, 都是先改造所有的数据, 再赋值

        const newCate = res.data.data.map((category) => {
          // 针对每个分类, 都返回一个拥有原来全部属性, 并多了一个 postList 的对象
          // 组成一个新数组
          return {
            ...category,
            postList: [],
            pageIndex: 1,
            pageSize: 6,
            loading: false,
            finished: false,
          };
        });
        // 将处理分类的逻辑抽离出来
        // 在里面添加一个只有 name 的分类
        newCate.push({
          name: "∨",
        });
        // 我希望拿到的分类数据, 原来有的数据我都要, 同时在这基础上各自添加一个数组管理文章
        this.cateList = newCate;

        // 获取完分类栏目数据, 才能第一次获取文章列表
        // 不然没法得到当前激活栏目的 id
        this.loadPost();

        console.log(this.cateList);
      });
    }
  },
  methods: {
    loadMorePost() {
      // 我要加载下一页
      // 1. 将当前激活分类的页码加一
      this.cateList[this.activeCateIndex].pageIndex += 1;
      // 2. 发送请求
      this.loadPost();
    },
    loadPost() {
      this.$axios({
        url: "/post",
        params: {
          // 这里是发送请求获取文章数据列表
          // 但是这么多分类, 我们只获取, 当前被激活分类的文章
          // 当前激活分类 = 从分类数组中, 拿出当前激活索引项
          // 就是当前激活分类的数据, 其中可以得到 id
          category: this.cateList[this.activeCateIndex].id,
          pageIndex: this.cateList[this.activeCateIndex].pageIndex,
          pageSize: this.cateList[this.activeCateIndex].pageSize,
        },
      }).then((res) => {
        console.log(res.data);
        // 以前获取数据都是直接放入 data
        // 现在每个分类都有自己的文章数组,
        // 放入当前激活的分类数据 的 postList 里面
        // 之前获取到的文章, 会替换原来的文章列表
        // this.cateList[this.activeCateIndex].postList = res.data.data
        // 不应该直接赋值而是应该在后面补上去
        this.cateList[this.activeCateIndex].postList = [
          // 将原来的数组展开
          ...this.cateList[this.activeCateIndex].postList,
          // 加上新的数据
          ...res.data.data,
        ];

        // 这里是真正加载完文章数据, 要将当前激活栏目的 loading 设回 false
        this.cateList[this.activeCateIndex].loading = false;

        // 还要进行最后一页的校验, 如果获取的数据长度, 比设定的要求小
        // 证明已经翻到最后一页, 将当前分类 finished 设为 true
        if (
          res.data.data.length < this.cateList[this.activeCateIndex].pageSize
        ) {
          this.cateList[this.activeCateIndex].finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
// 这里是属于子组件的样式, 如果不生效, 就添加 /deep/
/deep/ .van-tab__text {
  color: pink;
}
/deep/ .van-tab:nth-last-child(2) {
  background-color: #fff;
  position: sticky;
  right: -8px;
  width: 44px;
  line-height: 44px;
}
</style>